<template>
	<view>
		<view class="info">
			<view class="top">
				<view class="title">地址信息</view>
			</view>
			<view @click="editAddress">
				<view class="user">
					<text v-if="addressInfo.addId">{{addressInfo.name}} {{addressInfo.phone}}</text>
					<text v-else style="color: #8e8e8e;">请选择或新建地址</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="address" v-if="addressInfo.addId">
					{{addressInfo.province}}{{addressInfo.city}}{{addressInfo.district}}{{addressInfo.address}}
				</view>
				<view class="line" v-else> </view>
			</view>
			<view class="warning">
				<u-icon name="warning-fill" color="#d81e06"></u-icon>
				<span>因物流成本原因，上门服务地区暂不包括：西藏、新疆、青海、甘肃、内蒙古、宁夏、黑龙江、港澳台。</span>
			</view>
		</view>
		<view class="info">
			<view class="top">
				<view class="title">
					捐赠信息
				</view>
			</view>
			<view class="form_title">
				<view class="form_item">名称：</view>
				<u-input v-model="title" placeholder="请输入物品名称" border="bottom"></u-input>
			</view>
			<view class="form_title">
				<view class="form_item">新旧：</view>
				<u-input v-model="author" placeholder="请描述新旧程度" border="bottom"></u-input>
			</view>
			<view class="form_title">
				<view class="form_item2">上传相关图片：</view>
			</view>
			<view class="picBox">
				<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1" multiple
					:maxCount="5" :previewFullImage="true"></u-upload>
			</view>
			<view class="form_title">
				<view class="form_item2">想说的话：</view>
			</view>
			<u-textarea v-model="description" placeholder="可以描述物品新旧程度、给受捐者的寄语等"></u-textarea>
		</view>

		<view class="btn">
			<u-button text="提交信息" color="#d81e06" @click="admitForm"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		name: "Donate",
		data() {
			return {
				addressInfo: {},
				title: '',
				author: '',
				description: '',
				fileList: [],
			};
		},
		props: {
			info: Object
		},
		created() {
			this.addressInfo = this.info
		},
		watch: {
			info(newV, oldV) {
				this.addressInfo = newV
			}
		},
		methods: {
			// 点击选择地址
			editAddress() {
				uni.navigateTo({
					url: '/page_mine/Address?index=0',
				});
			},
			// 删除图片
			deletePic(event) {
				this.fileList.splice(event.index, 1)
			},
			// 新增图片
			afterRead(event) {
				var that = this
				const file = event.file[0]
				uni.uploadFile({
					url: 'http://192.168.31.240:8080/oss/fileoss',
					filePath: file.url,
					name: 'file',
					success: (uploadFileRes) => {
						const res = JSON.parse(uploadFileRes.data)
						that.fileList.push({
							url: res.data.url
						})
						console.log(that.fileList)
					},
				});
			},
			//确认并提交信息
			async admitForm() {
				// 验证表单各项信息是否为空
				if (!this.addressInfo.addId) {
					uni.showToast({
						title: '地址不能为空！',
						icon: 'none'
					})
				} else if (!this.title) {
					uni.showToast({
						title: '名称不能为空！',
						icon: 'none'
					})
				} else if (!this.author) {
					uni.showToast({
						title: '新旧描述不能为空！',
						icon: 'none'
					})
				} else if (!this.fileList.length) {
					uni.showToast({
						title: '请至少上传一张图片！',
						icon: 'none'
					})
				}
				var that = this;
				// 提交表单
				const {
					data: res
				} = await this.$myRequest({
					url: '/goodsBefore/addDonaGoods',
					method: 'post',
					data: {
						userId: uni.getStorageSync('userId'),
						addIdFrom: that.addressInfo.addId,
						title: that.title,
						author: that.author,
						goodsDesc: that.description,
						picture: that.fileList[0].url,
					}
				})
				if (res.code === 20000) {
					uni.showToast({
						title: '提交成功，审核通过将发布到首页',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 2000)
				}
			}


		},
	}
</script>

<style lang="scss" scoped>
	.info {
		margin: 40rpx 20rpx;
		padding: 0 20rpx;

		.top {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.title {
				font-weight: bold;
			}
		}

		.user {
			display: flex;
			justify-content: space-between;
			color: #666666;
		}

		.address {
			margin-top: 10rpx;
			font-size: smaller;
			color: lightgray;
		}

		.line {
			height: 1px;
			background-color: lightgray;
			margin-top: 30rpx;
		}


		.warning {
			margin-top: 20rpx;
			font-size: small;
			color: #8a8a8a;
			display: flex;

			/deep/ .u-icon {
				width: 32rpx;
				height: 32rpx;
			}
		}

		.form_title {
			display: flex;

			.form_item {
				width: 100rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
			}
		}

		.form_item2 {
			margin: 10rpx 0;
		}

	}

	.btn {
		width: 200rpx;
		margin: 0 auto 20rpx;
	}
</style>
